<template>
    <div class="wel-box">
        <div class="logo">
            <img src="../../images/logo.png">
            <p>为年轻人打造</p>
            <p>专业时尚的潮服交易平台</p>
        </div>
        <van-circle
        v-model:current-rate="currentRate"
        @click="clkEvt"
        :clockwise="false"
        size="60px"
        :color="{ '0%': 'red', '100%': 'blue' }"
        :text="`${Math.ceil(currentRate / 20)}s`"
        />
        <div class="right">@copy-rigth,chaofugou,2025-11-17</div>
    </div>
</template>

<script lang="ts" setup>
import { ref, Ref } from 'vue';
import { AUTO_CACHE_KEY } from '../../config/common.cfg';
import router from '../../router';

const currentRate:Ref<number> = ref(100)

/** 倒计时 */
let timer = setInterval( () => {
    currentRate.value -= 1
    if(currentRate.value <= 0) {
        clearInterval(timer)
        auto()
    }
}, 50)

function clkEvt() {
    clearInterval(timer)
    auto()
}

/** 免登录 */
function auto() {
    if(localStorage.getItem(AUTO_CACHE_KEY)) {
        router.push('/home')
    } else {
        router.push('/login')
    }
}
</script>

<style lang="less" scoped>
@import '../../style/common.less';

.wel-box {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to top, @g1, @g4);
    overflow: hidden;

    .logo {
        text-align: center;
        margin-top: 200px;

        img {
            width: 100px;
            height: 100px;
            border-radius: 20px;
        }

        p {
            line-height: 40px;
            background: linear-gradient(to right, red, blue);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bolder;
        }
    }

    .van-circle {
        position: fixed;
        right: 10px;
        top: 10px;
    }
}
</style>